<template>
	<view>
		<view class="box-detail">
			<view class="arctic">
				<view class="title">{{ model.title.rendered }}</view>
				<view class="sub-info">
					<view class="u-flex">
						<text>2023-11-07</text>
					</view>
					<view class="u-flex">
						<u-icon name="chat"></u-icon>
						<text>23</text>
					</view>
					<view class="u-flex">
						<u-icon name="thumb-up"></u-icon>
						<text>23</text>
					</view>
					<view class="u-flex">
						<u-icon name="eye"></u-icon>
						<text>2323</text>
					</view>
				</view>
				<u-parse :content="content"></u-parse>
			</view>
		</view>
		<view class="footer">
			<view class="u-flex-1">
				<u-input shape="circle"></u-input>
			</view>
			<view class="menu">
				<u-icon name="moments"></u-icon>
				<u-icon name="weixin-fill"></u-icon>
				<u-icon name="rmb-circle"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					id: '',
					title: {
						rendered: ''
					}
				},
				content: ''
			}
		},
		onLoad(options) {
			if (options.id) {
				this.model.id = options.id
				this.fetchData()
			}

		},
		methods: {
			fetchData() {
				let url = 'https://www.watch-life.net/wp-json/watch-life-net/v1/posts/' + this.model.id
				uni.$u.http.get(url).then(response => {
					// console.log(response.data)
					this.model = response.data
					this.content = this.model.content.rendered
					uni.setNavigationBarTitle({
						title: this.model.category_name
					})
				})

			}
		}
	}
</script>

<style lang="scss">
	.box-detail {
		height: 100vh;
		background-color: #EEE;
		width: 100%;
		overflow-x: hidden;

		.arctic {
			width: 700upx;
			min-height: 100vh;
			background-color: #FFF;
			border-radius: 10upx;
			margin: 10upx auto;
			padding: 10upx;

			.title {
				font-size: 48upx;
				font-weight: 600;
			}

			.sub-info {
				font-size: 24upx;
				padding: 20upx 10upx;
				display: flex;
				gap: 20upx;
				color: #b7b7b7;
			}
		}

	}

	.gap {
		height: 200upx;
		width: 100%;
		background-color: #EEE;
	}

	.footer {
		bottom: 0upx;
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		left: 0px;
		padding: 20upx 10upx;
		z-index: 10;
		background-color: #FFF;
		text-align: center;
		display: flex;

		.u-flex-1 {
			flex: 1;
		}

		.menu {
			margin-left: 30upx;
			display: flex;
			gap: 30upx;
		}
	}

	.u-flex {
		display: flex;
	}
</style>